<template>
  <el-card>
    <template #header>
      <span class="el-card-title">工作进度</span>
      <i-ep-close
        v-show="!panelSetIcon"
        class="el-icon-close"
        style="float: right; padding: 3px 0"
        @click="deletePanelItem"
      />
    </template>

    <div class="echarts h-full">
      <ECharts v-if="option" :option="option" :id="`LiquidFill` + props.id" />
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import "echarts-liquidfill/src/liquidFill.js";
const emit = defineEmits(["deletePanelItemEvent"]);

const props = defineProps({
  panelSetIcon: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  url: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const { panelSetIcon, id, url } = toRefs(props);

function deletePanelItem() {
  emit("deletePanelItemEvent", id.value);
}

const option = ref();

onMounted(() => {
  option.value = {
    backgroundColor: "transparent",
    series: [
      {
        type: "liquidFill",
        radius: "80%",
        center: ["25%", "50%"],
        data: [0.48, 0.48],
        backgroundStyle: {
          borderWidth: 2,
          borderColor: "#2aa1e3",
          color: "transparent",
        },
        itemStyle: {
          shadowBlur: 0,
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
              offset: 1,
              color: "rgba(135, 241, 244, 0.7)",
            },
            {
              offset: 0,
              color: "rgba(73, 192, 255, 0.7)",
            },
          ]),
          opacity: 1,
        },
        outline: {
          show: false,
        },
        label: {
          fontSize: 15,
          fontFamily: "DINAlt",
          formatter: function (v: any) {
            return `{per|${(v.data * 100).toFixed(0)}%}` + "\n工作进度";
          },
          align: "center",
          rich: {
            per: {
              fontSize: 26,
              fontFamily: "DINAlt",
              lineHeight: 46,
            },
          },
        },
      },

      {
        //第二个球的填充
        type: "liquidFill",
        radius: "80%",
        center: ["75%", "50%"],
        itemStyle: {
          shadowBlur: 0,
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
              offset: 1,
              color: "rgba(135, 241, 244, 0.7)",
            },
            {
              offset: 0,
              color: "rgba(73, 192, 255, 0.7)",
            },
          ]),
          opacity: 1,
        },
        data: [0.76, 0.76], // data个数代表波浪数
        backgroundStyle: {
          borderWidth: 2,
          borderColor: "#2aa1e3",
          color: "transparent",
        },
        label: {
          fontSize: 15,
          fontFamily: "DINAlt",
          formatter: function (v: any) {
            return `{per|${(v.data * 100).toFixed(0)}%}` + "\n完成率";
          },
          align: "center",
          rich: {
            per: {
              fontSize: 26,
              fontFamily: "DINAlt",
              lineHeight: 46,
            },
          },
        },
        outline: {
          show: false,
        },
      },
    ],
  };
});
</script>

<style lang="scss" scoped>
.el-card {
  height: 100%;
}
.el-card-title {
  font-weight: bold;
  font-size: 14px;
  color: lightslategrey;
}
:deep(.el-card__body) {
  height: 100% !important;
  padding: 0 !important;
}
:deep(.el-card__header) {
  padding: 10px;
}

.echarts {
  width: 100%;
  height: calc(100% - 45px);
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.04);
  padding: 15px;
}
</style>
